.clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

.relative {
  position: relative;
  width: 100%;
  height: 100%;
}

.pct(@pct) {
  width: @pct;
  position: relative;
  margin: 0 auto;
}

.triangle(@width, @height, @color, @direction) {
  @width: @width/2;
  @color-border-style: @height solid @color;
  @transparent-border-style: @width solid transparent;
  height: 0;
  width: 0;

  & when (@direction=up) {
    border-bottom: @color-border-style;
    border-left: @transparent-border-style;
    border-right: @transparent-border-style;
  }

  & when (@direction=right) {
    border-left: @color-border-style;
    border-top: @transparent-border-style;
    border-bottom: @transparent-border-style;
  }

  & when (@direction=down) {
    border-top: @color-border-style;
    border-left: @transparent-border-style;
    border-right: @transparent-border-style;
  }

  & when (@direction=left) {
    border-right: @color-border-style;
    border-top: @transparent-border-style;
    border-bottom: @transparent-border-style;
  }
}
